<template>
  <div class="report">
    <div class="areport" @click="reportDialogVisible = true">
      <!--<i class="bui-icon icon-report"></i>-->
      <tt-icon
        type="report"
        size="14"
        color="#cacaca"
      ></tt-icon><span>举报</span>
    </div>
    <tt-dialog title="举报文章问题" size="tiny" v-model="reportDialogVisible">
      <div class="content">
        <div class="option">
          <label for="c-1">广告</label>
          <input type="checkbox" name="report" id="c-1" rtype="23" value="0">
        </div>
        <div class="option">
          <label for="c-2">重复、旧闻</label>
          <input type="checkbox" name="report" id="c-2" rtype="1" value="0">
        </div>
        <div class="option">
          <label for="c-3">格式问题</label>
          <input type="checkbox" name="report" id="c-3" rtype="3" value="0">
        </div>
        <div class="option">
          <label for="c-4">低俗</label>
          <input type="checkbox" name="report" id="c-4" rtype="14" value="0">
        </div>
        <div class="option">
          <label for="c-5">标题夸张</label>
          <input type="checkbox" name="report" id="c-5" rtype="15" value="0">
        </div>
        <div class="option">
          <label for="c-6">与事实不符</label>
          <input type="checkbox" name="report" id="c-6" rtype="17" value="0">
        </div>
        <div class="option">
          <label for="c-7">疑似抄袭</label>
          <input type="checkbox" name="report" id="c-7" rtype="18" value="0">
        </div>
        <div class="option">
          <p :class="{active: complainShow}" @click="expand">其他问题，我要吐槽<i class="bui-icon icon-arrow_down"></i></p>
          <textarea v-if="complainShow" v-model="complainText"></textarea>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <tt-button @click="reportDialogVisible = false">取消</tt-button>
        <tt-button type="primary" @click="report">确认</tt-button>
      </span>
    </tt-dialog>
  </div>
</template>
<script>
  import reqwest from 'reqwest';
  import Cookies from 'js-cookie';

  export default {
    name: 'Report',
    props: {
      groupId: {
        type: String,
        required: true
      }
    },
    components: {
    },
    data () {
      return {
        reportDialogVisible: false,
        complainShow: false,
        complainText: ''
      };
    },
    methods: {
      report () {
        const self = this;
        const param = {
          group_id: self.groupId,
          app_name: 'toutiao_web',
          aid: 24,
          report_type: '',
          report_content: ''
        };

        const inputs = document.querySelectorAll('.report .content input');
        const complains = [];
        for (let input of inputs) {
          input.checked && complains.push(input.getAttribute('rtype'));
        }
        if (self.complainShow) {
          complains.push(0);
          param.report_content = self.complainText;
        }

        if (complains.length === 0) {
          self.$Toast('请填写投诉原因');
          return;
        }

        param.report_type = complains.join(',');

        reqwest({
          url: '/api/article/report',
          headers: {'X-CSRFToken': Cookies.get('csrftoken')},
          data: param,
          method: 'post',
          success: (rs) => {
            let msg = '投诉失败';
            if (rs && rs.message === 'success') {
              msg = '投诉成功';
              self.reportDialogVisible = false;
            }
            self.$Toast(msg);

            // clear state
            for (const input of inputs) {
              input.checked = false;
            }
            self.complainShow = false;
            self.complainText = '';
          }
        });

      },
      expand () {
        this.complainShow = !this.complainShow;
      }
    }
  };
</script>
<style lang="less">
  .report {
    .areport {
      display: inline-block;
      cursor: pointer;
      line-height: 18px;
      span{
        color: #999;
        font-size: 14px;
        vertical-align: middle;
      }
      i {
        width: 14px;
        margin-right: 7px;
        vertical-align: middle;
        &:hover {
          opacity: .6;
        }
      }
    }
    .tt-dialog__body {
      padding: 0;
    }
    .content {
      font-size: 14px;
      padding: 20px 20px 0 20px;
      box-sizing: border-box;
      .option {
        margin-bottom: 18px;
        &:last-child {
          margin-bottom: 0;
        }
        input {
          float: right;
        }
        p {
          cursor: pointer;
          color: #406599;
          margin-bottom: 8px;
          i {
            color: #406599;
          }
          &.active {
            i {
              transform: rotate(180deg);
            }
          }
        }
        textarea {
          width: 100%;
          height: 72px;
          font-size: 14px;
          padding: 10px;
          box-sizing: border-box;
          color: #5d5d5d;
          border: 1px #e9e9e9 solid;
          border-radius: 4px;
          outline: none;
          resize: none;
        }
      }
      .ok-btn {
        width: 140px;
        height: 40px;
        margin: 0 auto;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        color: #fff;
        background: #ED4040;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .tt-button {
      &--default {
        &:hover, &:focus {
          color: #ED4040;
          border-color: #ED4040;
        }
      }
      &--primary {
        background-color: #ED4040;
        border-color: #ED4040;
        &:hover, &:focus {
          background-color: #d53a3a;
          border-color: #d53a3a;
        }
      }
    }
  }
</style>


// WEBPACK FOOTER //
// report.vue?534aa1ef
